.vk-input {
	--vk-input-text-color: var(--vk-text-color-regular);
	--vk-input-border: var(--vk-border);
	--vk-input-hover-border: var(--vk-border-color-hover);
	--vk-input-focus-border: var(--vk-color-primary);
	--vk-input-transparent-border: 0 0 0 1px transparent inset;
	--vk-input-border-color: var(--vk-border-color);
	--vk-input-border-radius: var(--vk-border-radius-base);
	--vk-input-bg-color: var(--vk-fill-color-blank);
	--vk-input-icon-color: var(--vk-text-color-placeholder);
	--vk-input-placeholder-color: var(--vk-text-color-placeholder);
	--vk-input-hover-border-color: var(--vk-border-color-hover);
	--vk-input-clear-hover-color: var(--vk-text-color-secondary);
	--vk-input-focus-border-color: var(--vk-color-primary);
}

.vk-input {
	--vk-input-height: var(--vk-component-size);
	position: relative;
	font-size: var(--vk-font-size-base);
	display: inline-flex;
	width: 100%;
	line-height: var(--vk-input-height);
	box-sizing: border-box;
	vertical-align: middle;
	&.is-disabled {
		cursor: not-allowed;
		.vk-input__wrapper {
			background-color: var(--vk-disabled-bg-color);
			box-shadow: 0 0 0 1px var(--vk-disabled-border-color) inset;
		}
		.vk-input__inner {
			color: var(--vk-disabled-text-color);
			-webkit-text-fill-color: var(--vk-disabled-text-color);
			cursor: not-allowed;
		}
		.vk-textarea__inner {
			background-color: var(--vk-disabled-bg-color);
			box-shadow: 0 0 0 1px var(--vk-disabled-border-color) inset;
			color: var(--vk-disabled-text-color);
			-webkit-text-fill-color: var(--vk-disabled-text-color);
			cursor: not-allowed;
		}
	}
	&.is-prepend {
		> .vk-input__wrapper {
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
		}
	}
	&.is-append {
		> .vk-input__wrapper {
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
		}
	}
}

.vk-input--large {
	--vk-input-height: var(--vk-component-size-large);
	font-size: 14px;
	.vk-input__wrapper {
		padding: 1px 15px;
		.vk-input__inner {
			--vk-input-inner-height: calc(var(--vk-input-height, 40px) - 2px);
		}
	}
}
.vk-input--small {
	--vk-input-height: var(--vk-component-size-small);
	font-size: 12px;
	.vk-input__wrapper {
		padding: 1px 7px;
		.vk-input__inner {
			--vk-input-inner-height: calc(var(--vk-input-height, 24px) - 2px);
		}
	}
}
.vk-input__prefix,
.vk-input__suffix {
	display: inline-flex;
	white-space: nowrap;
	flex-shrink: 0;
	flex-wrap: nowrap;
	height: 100%;
	text-align: center;
	color: var(--vk-input-icon-color, var(--vk-text-color-placeholder));
	transition: all var(--vk-transition-duration);
}
.vk-input__prefix {
	> :first-child {
		margin-left: 0px !important;
	}
	> :last-child {
		margin-right: 8px !important;
	}
}
.vk-input__suffix {
	> :first-child {
		margin-left: 8px !important;
	}
	> :last-child {
		margin-right: 0px !important;
	}
}
.vk-input__prepend,
.vk-input__append {
	background-color: var(--vk-fill-color-light);
	color: var(--vk-color-info);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 100%;
	border-radius: var(--vk-input-border-radius);
	padding: 0 20px;
	white-space: nowrap;
}
.vk-input__prepend {
	border-right: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	box-shadow: 1px 0 0 0 var(--vk-input-border-color) inset,
		0 1px 0 0 var(--vk-input-border-color) inset,
		0 -1px 0 0 var(--vk-input-border-color) inset;
}
.vk-input__append {
	border-left: 0;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	box-shadow: 0 1px 0 0 var(--vk-input-border-color) inset,
		0 -1px 0 0 var(--vk-input-border-color) inset,
		-1px 0 0 0 var(--vk-input-border-color) inset;
	& > .vk-input__wrapper {
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}
}

.vk-input--textarea {
	position: relative;
	display: inline-block;
	width: 100%;
	vertical-align: bottom;
	font-size: var(--vk-font-size-base);
}
.vk-textarea__wrapper {
	position: relative;
	display: block;
	resize: vertical;
	padding: 5px 11px;
	line-height: 1.5;
	box-sizing: border-box;
	width: 100%;
	font-size: inherit;
	font-family: inherit;
	color: var(--vk-input-text-color, var(--vk-text-color-regular));
	background-color: var(--vk-input-bg-color, var(--vk-fill-color-blank));
	background-image: none;
	-webkit-appearance: none;
	box-shadow: 0 0 0 1px var(--vk-input-border-color, var(--vk-border-color))
		inset;
	border-radius: var(--vk-input-border-radius, var(--vk-border-radius-base));
	transition: var(--vk-transition-box-shadow);
	border: none;
	&:focus {
		outline: none;
		box-shadow: 0 0 0 1px var(--vk-input-focus-border-color) inset;
	}
	&::placeholder {
		color: var(--vk-input-placeholder-color);
	}
}
.vk-input__wrapper {
	display: inline-flex;
	flex-grow: 1;
	align-items: center;
	justify-content: center;
	padding: 1px 11px;
	background-color: var(--vk-input-bg-color, var(--vk-fill-color-blank));
	background-image: none;
	border-radius: var(--vk-input-border-radius, var(--vk-border-radius-base));
	transition: var(--vk-transition-box-shadow);
	box-shadow: 0 0 0 1px var(--vk-input-border-color, var(--vk-border-color))
		inset;
	&:hover {
		box-shadow: 0 0 0 1px var(--vk-input-hover-border-color) inset;
	}
	&.is-focus {
		box-shadow: 0 0 0 1px var(--vk-input-focus-border-color) inset;
	}
	.vk-input__inner {
		--vk-input-inner-height: calc(var(--vk-input-height, 32px) - 2px);
		width: 100%;
		flex-grow: 1;
		-webkit-appearance: none;
		color: var(--vk-input-text-color, var(--vk-text-color-regular));
		font-size: inherit;
		height: var(--vk-input-inner-height);
		line-height: var(--vk-input-inner-height);
		padding: 0;
		outline: none;
		border: none;
		background: none;
		box-sizing: border-box;
		&::placeholder {
			color: var(--vk-input-placeholder-color);
		}
	}
	.vk-icon {
		height: inherit;
		line-height: inherit;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: all var(--vk-transition-duration);
		margin-left: 8px;
	}
	.vk-input__clear,
	.vk-input__password {
		color: var(--vk-input-icon-color);
		font-size: 14px;
		cursor: pointer;
		&:hover {
			color: var(--vk-input-clear-hover-color);
		}
	}
}
